﻿<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>网上祭奠</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet">
		<link href="js/JBox/jBox.css" rel="stylesheet" />
		<link href="js/JBox/plugins/Notice/jBox.Notice.css"  rel="stylesheet"/>
		<link rel="stylesheet" href="css/index.css" />
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/draggabilly.pkgd.js"></script>
    <script type="text/javascript" src="js/jquery.mCustomScrollbar.js" ></script>
    <script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js" ></script>
    <script type="text/javascript" src="js/JBox/jBox.js" ></script>
    <script type="text/javascript" src="js/JBox/plugins/Notice/jBox.Notice.js" ></script>
    <script type="text/javascript" src="js/jquery.cookie.js" ></script>
    
    <script type="text/javascript">
    	
    	if($.cookie("JP")==null||$.cookie("JP")=="null"){
    		window.location="Login.html";
    	}
    	
    	var swidth=window.screen.availWidth;
    	var sheight=window.screen.availHeight;
    	
    	$(document).ready(function(){
    		 //$("head").append("<script src='http://localhost:1244/server/Handler.ashx?callback=showData'><\/script>");
    			$(".main-altar").find(".main-offering").each(function(){
    				$(this).draggabilly({
						  containment: '.main-altar'
						})
    			});
    			
    		
				$(".main-menu-trigger").mouseenter(function () {
		                $(this).stop().animate({ borderSpacing: -360 }, {
		                    step: function (now, fx) {
		                        $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
		                        $(this).css('-moz-transform', 'rotate(' + now + 'deg)');
		                        $(this).css('-ms-transform', 'rotate(' + now + 'deg)');
		                        $(this).css('-o-transform', 'rotate(' + now + 'deg)');
		                        $(this).css('transform', 'rotate(' + now + 'deg)');
		                },
		                    duration: 'slow'
		                }, 'linear');            
	        });
	        
	        $(".main-menu-trigger").click(function () {
		    		if($(".main-menu").css("display")!="none"){
		    			$(".main-menu").slideUp("fast")
		    		}else{
		    			$(".main-menu").slideDown("fast");
		    		}
	    	});

    		
    		$(".pop1-title-close").click(function(){
    					$(".main-mask").fadeOut(10);
	    				$(".main-pop1").animate({"left":"100%"},200,function(){	    					
	    					$(".main-pop1").hide();
	    				});
    		});
    		
    		$(".pop2-title-close").click(function(){
    					$(".main-mask").fadeOut(10);
	    				$(".main-pop2").animate({"left":"100%"},200,function(){	    					
	    					$(".main-pop2").hide();
	    				});
    		});
    		
    		$(".main-pop2-content ul li div").click(function(){
    			$(".main-headstone").css("background-image","url("+$(this).find("img").attr("src")+")");
    		});
    		
    		$(".main-pop1-content ul li").click(function(){
    			var html="<div class='main-offering cake' style='background-image: url(img/cake/1.png);'></div>";
    			$(".main-altar").append(html);
    			
					  	$(".main-pop1").animate({"top":0},"fast",function(){
    					$(".main-mask").fadeOut(10);
	    				$(".main-pop1").fadeOut("fast");
    				});
    		});
    	});
    	
    	
    	function showSacrifice(title){
    		var sid;
    		switch(title){
    			case "贡品":
    				sid=1;
    			break;
    			case "祭品":
    				sid=2;
    			break;
    			case "鲜花":
    				sid=3;
    			break;
    			case "香烛":
    				sid=4;
    			break;
    		}
    		$(".pop1-title").text(title+"选择");    		
		    $(".main-pop1").css("top",0);
		    $(".main-mask").fadeIn(10);
		    $(".main-pop1").show();
		    $(".main-pop1").animate({"left":0},200);
		    
		    $.ajax({
	          url: "/api/Memorial/GetSacrifice?sNo="+sid,
	          type: "GET",
	          dataType: "json", 
	          success: function (data) {	
							var dataObj=eval(data);
							var html="";
							for(var i=0;i<dataObj.Data.length;i++){
								html+="<li class='col-lg-1 col-md-2 col-sm-6 col-xs-6' style='padding-left:5px;padding-right:5px'><div>";
								html+="<input class='sid' type='hidden' value='"+dataObj.Data[i]._id+"'/>";
								html+="<input class='sclass' type='hidden' value='"+dataObj.Data[i]._scname+"'/>";
								html+="<img src='"+dataObj.Data[i]._spicpath+"' class='img-responsive' style='margin:0 auto;width:90%;'/>";
								html+="<p class='pop1-name'>名称："+dataObj.Data[i]._sname+"</p>";
								html+="<p class='pop1-price'>价格："+dataObj.Data[i]._sprice+".00元</p>";
								html+="</div></li>";
							}	
							$(".main-pop1-content ul").html(html);
							
							if(sid==1){
								$(".main-pop1-content ul li").click(function(){
									var sid=$(this).find("input[type=hidden]").val();
									var src=$(this).find("img").attr("src");
									$(".main-altar").append("	<div class='main-offering cake' id='"+uid+"_"+sid+"' style='background-image: url("+src+");'></div>")
										$("#"+uid+"_"+sid).draggabilly({
										  containment: '.main-altar',
										});
										$("#"+uid+"_"+sid).css("top","50%");
										$("#"+uid+"_"+sid).css("left","50%");
											$(".main-mask").fadeOut(10);
					    				$(".main-pop1").animate({"left":"100%"},200,function(){	    					
					    					$(".main-pop1").hide();
					    				});
								});							
							}else if(sid==2){
								$(".main-pop1-content ul li").click(function(){
									var sid=$(this).find("input[type=hidden]").val();
									var src=$(this).find("img").attr("src");
									$(".main-altar").append("	<div class='main-offering cloth' id='"+uid+"_"+sid+"' style='background-image: url("+src+");'></div>")
										$("#"+uid+"_"+sid).draggabilly({
										  containment: '.main-altar',
										});
										$("#"+uid+"_"+sid).css("top","50%");
										$("#"+uid+"_"+sid).css("left","50%");
											$(".main-mask").fadeOut(10);
					    				$(".main-pop1").animate({"left":"100%"},200,function(){	    					
					    					$(".main-pop1").hide();
					    				});
								});			
							}else if(sid==3){
								$(".main-pop1-content ul li").click(function(){
									var sid=$(this).find(".sid").val();
									var src=$(this).find("img").attr("src");
									var sclass=$(this).find(".sclass").val();
									if(sclass=="花束")
										$(".main-altar").append("	<div class='main-offering flower' id='"+uid+"_"+sid+"' style='background-image: url("+src+");'></div>")
									else 
										$(".main-altar").append("	<div class='main-offering flowerCircle' id='"+uid+"_"+sid+"' style='background-image: url("+src+");'></div>")
										$("#"+uid+"_"+sid).draggabilly({
										  containment: '.main-altar',
										});
										$("#"+uid+"_"+sid).css("top","50%");
										$("#"+uid+"_"+sid).css("left","50%");
											$(".main-mask").fadeOut(10);
					    				$(".main-pop1").animate({"left":"100%"},200,function(){	    					
					    					$(".main-pop1").hide();
					    				});
								});			
							}else if(sid==4){
								$(".main-pop1-content ul li").click(function(){
									var sid=$(this).find("input[type=hidden]").val();
									var src=$(this).find("img").attr("src");
									$(".main-altar").append("	<div class='main-offering candle' id='"+uid+"_"+sid+"' style='background-image: url("+src+");'></div>")
										$("#"+uid+"_"+sid).draggabilly({
										  containment: '.main-altar',
										});
										$("#"+uid+"_"+sid).css("top","50%");
										$("#"+uid+"_"+sid).css("left","50%");
											$(".main-mask").fadeOut(10);
					    				$(".main-pop1").animate({"left":"100%"},200,function(){	    					
					    					$(".main-pop1").hide();
					    				});
								});			
							}
           },
           error:function(XMLHttpRequest,textStatus,errorThrown)
           {
           	console.log(errorThrown);
           }
         });
    	}
    	
    	function showHeadStoneBG(title){
    		var sid;
    		switch(title){
    			case "墓碑":
    				sid=1;
    			break;
    			case "背景":
    				sid=2;
    			break;
    		}
    		$(".pop2-title").text(title+"选择"); 
		   	$(".main-pop2").css("top",0);
		    $(".main-mask").fadeIn(10);
		    $(".main-pop2").show();
		    $(".main-pop2").animate({"left":0},200);
		    
		    $.ajax({
	          url: "/api/Memorial/GetTombstoneinfo?tCategory="+sid,
	          type: "GET",
	          dataType: "json", 
	          success: function (data) {	
							var dataObj=eval(data);
							var html="";
							for(var i=0;i<dataObj.Data.length;i++){
								html+="<li class='col-lg-2 col-md-3 col-sm-4 col-xs-4' style='padding-left:5px;padding-right:5px'><div class='pop2-div'>";
								html+="<div class='pop2-img' style='background-image:url("+dataObj.Data[i]._tpicpath+");' title='"+dataObj.Data[i]._tname+"'>;";
								html+="</div><input id='tCategory' type='hidden' value='"+dataObj.Data[i]._id+"'/></div></li>";
							}	
							$(".main-pop2-content ul").html(html);
							
							$(".pop2-div").click(function(){
								var src=$(this).find(".pop2-img").css("background-image");
								var tid=$(this).find("input[type=hidden]").val();
								
								if(title=="背景"){
									$(".main-bg").css("background-image",src);
										new jBox('Notice', {width: 150,height: 50,content: '背景更换成功！',autoClose: 3000,
											    color: 'black',animation: {open: 'tada',close: 'slide:top'},
											    position: {x: ($(window).width()-150)/2,y: ($(window).height()-50)/2}
										});
								}else if(title=="墓碑"){
									$(".main-headstone").css("background-image",src);
										new jBox('Notice', {width: 150,height: 50,content: '墓碑更换成功！',autoClose: 3000,
										    color: 'black',animation: {open: 'tada',close: 'slide:top'},
										    position: {x: ($(window).width()-150)/2,y: ($(window).height()-50)/2}
									});
								}
								$(".main-mask").fadeOut(10);
		    				$(".main-pop2").animate({"left":"100%"},200,function(){	    					
		    					$(".main-pop2").hide();
		    				});
							});
           },
           error:function(XMLHttpRequest,textStatus,errorThrown)
           {
           	console.log(errorThrown);
           }
         });
    	}
    	
    	function showRank(){
    		$(".pop2-title").text("排行"); 
		   	$(".main-pop2").css("top",0);
		    $(".main-mask").fadeIn(10);
		    $(".main-pop2").show();
		    $(".main-pop2").animate({"left":0},200);
		    
		    var html="";
				html+="<li class='col-lg-6 col-md-6 col-sm-12 col-xs-12' style='padding-left:5px;padding-right:5px'><div style='border:1px solid lightgray;box-shadow:0 0 5px lightgray;text-align:left;padding:20px'>";
				html+="<div style='height:150px'>";
				html+="<div style='width:150px;float:left;display:inline;min-width:100px'><img src='img/cake/1.png' class='img-responsive'/></div>";
				html+="<div style='width:calc(100% - 170px);float:right;display:inline;margin-left:20px;margin-top:20px'><p style='font-size:1.2em'>名称：草莓夹心</p><p>开始时间：2018-4-19 15:00:00</p><p>结束日期：2018-5-19 15:00:00</p></div></div>;";
				html+="<span style='float:left;font-size:1.2em'> 祝你一路走好！</span><span style='float:right;font-size:1.2em'>XXX</span></div></li>";
				html+="<li class='col-lg-6 col-md-6 col-sm-12 col-xs-12' style='padding-left:5px;padding-right:5px'><div style='border:1px solid lightgray;box-shadow:0 0 5px lightgray;text-align:left;padding:20px'>";
				html+="<div style='height:150px'>";
				html+="<div style='width:150px;float:left;display:inline;min-width:100px'><img src='img/cake/1.png' class='img-responsive'/></div>";
				html+="<div style='width:calc(100% - 170px);float:right;display:inline;margin-left:20px;margin-top:20px'><p style='font-size:1.2em'>名称：草莓夹心</p><p>开始时间：2018-4-19 15:00:00</p><p>结束日期：2018-5-19 15:00:00</p></div></div>;";
				html+="<span style='float:left;font-size:1.2em'> 祝你一路走好！</span><span style='float:right;font-size:1.2em'>XXX</span></div></li>";

				$(".main-pop2-content ul").html(html);														
//		    $.ajax({
//	          url: "/api/Memorial/GetTombstoneinfo?tCategory=",
//	          type: "GET",
//	          dataType: "json", 
//	          success: function (data) {	
//							var dataObj=eval(data);
//							var html="";
//							for(var i=0;i<dataObj.Data.length;i++){
//								html+="<li class='col-lg-6 col-md-6 col-sm-6 col-xs-12' style='padding-left:5px;padding-right:5px'><div>";
//								html+="<div style='height:200px'>";
//								html+="<div style='width:25%;float:left;display:inline'><img src='' /></div>";
//								html+="<div style='width:75%;float:right;display:inline'><p>名称：草莓夹心</p><p>开始时间：2018-4-19</p><p>结束日期：2018-5-19</p></div></div>;";
//								html+="<span>一路走好！</span><span>XXX</span></div></li>";
//							}	
//							$(".main-pop2-content ul").html(html);														
//         },
//         error:function(XMLHttpRequest,textStatus,errorThrown)
//         {
//         	console.log(errorThrown);
//         }
//       });
    	}
    	
    	// 全屏代码  
			function fullScreen() {  
			    var elem = document.body;  
			    if (elem.webkitRequestFullScreen) {  
			        elem.webkitRequestFullScreen();  
			    } else if (elem.mozRequestFullScreen) {  
			        elem.mozRequestFullScreen();  
			    } else if (elem.requestFullScreen) {  
			        elem.requestFullscreen();  
			    } else {  
			        notice.notice_show("浏览器不支持全屏API或已被禁用", null, null, null, true, true);  
			    }  
			}  
    	
    </script>
    <style>
    	html,body{
    		background:#c7c3be;
    	}  
    	
    	@media(max-width:1334px){
    		.main-bg{
    			width:1334px;
    			height: 750px;
    		}
    		
    		.main-headstone{
    			width:1334px;
    			height: 750px;
    		}
    		
    		.main-altar{
    			width:1334px;
    			height: 400px;
    		}
    		
    		.main-name{
    			font-size: 0.9em;
    		}
    	}
    	
    </style>
  </head>
  <body>
  	<div class="main-mask"></div>
<div class="main-bg">
 	<div class="main-headstone">
 		<div class="main-photo"></div>
 		<div class="main-name">无名氏之墓</div>
 		<div class="main-altar">
 		</div>
  </div>
  <div class="main-menu">
  	<ul>
  		<li style="background-image: url(img/ico/jb_gongpin.png);" onclick="showSacrifice($(this).text())"><span>贡品</span></li>
  		<li style="background-image: url(img/ico/jb_jipin.png);" onclick="showSacrifice($(this).text())"><span>祭品</span></li>
  		<li style="background-image: url(img/ico/jb_hua.png);" onclick="showSacrifice($(this).text())"><span>鲜花</span></li>
  		<li style="background-image: url(img/ico/jb_xiangzhu.png);" onclick="showSacrifice($(this).text())"><span>香烛</span></li>
  		<li style="background-image: url(img/ico/jb_mubei.png);" onclick="showHeadStoneBG($(this).text())"><span>墓碑</span></li>
  		<li style="background-image: url(img/ico/jb_bj.png);" onclick="showHeadStoneBG($(this).text())"><span>背景</span></li>
  		<li style="background-image: url(img/ico/icon_rank.png);" onclick="showRank()"><span>排行</span></li>
  	</ul>
  </div>
</div>
<div class="main-menu-trigger" title="隐藏/显示菜单"></div>
<div class="main-pop1">
	<div class="main-pop1-title">
		<span class="pop1-title">贡品选择</span>
		<span class="pop1-title-close" title="关闭">×</span>
	</div>
	<div class="main-pop1-content">
		<ul class="container-fluid">
			
		</ul>
	</div>
</div>

<div class="main-pop2">
	<div class="main-pop2-title">
		<span class="pop2-title"></span>
		<span class="pop2-title-close" title="关闭">×</span>
	</div>
	<div class="main-pop2-content">
		<ul>
			
		</ul>
	</div>
</div>
  </body>
</html>